マウスストーカーを作成する（3）
今回はマウスストーカー作成の最終回として、複数の画像がマウスポインタを追いかける方法を解説します。基本的な考え方は前回の講座と同じですが、変数の数が多くなること、および画像の追従速度に注意しなければいけません。とはいえ、たいして難しくないので気軽にチャレンジできると思います。ぜひ試してみてください。 サンプルページ

→ 複数の画像が追いかけるマウスストーカー
 
ここでは、3つの画像がマウスポインタを追いかけるマウスストーカーを紹介します。この場合も基本的な考え方は前回の講座と同じですが、画像の座標を管理する変数が3組に増えます。今回は（ix0,iy0）（ix1,iy1）（ix2,iy2）という3組の変数を用意し、それぞれの画像を管理しました。また、3つの画像が重なってマウスポインタを追いかけないように各画像の追従速度を変化させる必要があります。これは「(mx-ix0)/10」「(mx-ix1)/20」「(my-iy2)/30」のように、“座標の差”を割る数値を変化させることにより実現します。
<BODY onLoad="ImageMove()">

<IMG id="img0" src="star0.gif" style="position:absolute; left:-30px; top:-30px;">
<IMG id="img1" src="star1.gif" style="position:absolute; left:-30px; top:-30px;">
<IMG id="img2" src="star2.gif" style="position:absolute; left:-30px; top:-30px;">

<SCRIPT type="text/javascript">
<!--
var ix0=-30, iy0=-30;
var ix1=-30, iy1=-30;
var ix2=-30, iy2=-30;
var mx=0, my=0;
document.onmousemove = MouseMove;
function MouseMove() {
mx=event.clientX;
my=event.clientY;
}
function ImageMove() {
ix0=ix0+(mx-ix0)/10;
iy0=iy0+(my-iy0)/10;
ix1=ix1+(mx-ix1)/20;
iy1=iy1+(my-iy1)/20;
ix2=ix2+(mx-ix2)/30;
iy2=iy2+(my-iy2)/30;
img0.style.left = ix0 + "px";
img0.style.top = iy0 + "px";
img1.style.left = ix1 + "px";
img1.style.top = iy1 + "px";
img2.style.left = ix2 + "px";
img2.style.top = iy2 + "px";
setTimeout("ImageMove()",10);
}
// -->
</SCRIPT>

</BODY>		 サンプルページ


→ 変数を配列で管理する
 
5つ、6つ、7つ、…と画像の数を増やしていく場合は、以下のように配列で各座標を管理すると便利です。変数「n」には（画像の数）から1を引いた数値を指定してください。あとは、IMGタグで必要なだけ画像を配置するだけでマウスストーカーの数を増やすことができます。ただし、id名ではなくdocument.images[]でそれぞれの画像を操作しているため、BODYタグの直後にマウスストーカー用のIMGタグを記述しなければいけません。
<BODY onLoad="ImageMove()">

<IMG src="star0.gif" style="position:absolute; left:-30px; top:-30px;">
<IMG src="star1.gif" style="position:absolute; left:-30px; top:-30px;">
<IMG src="star2.gif" style="position:absolute; left:-30px; top:-30px;">

<SCRIPT type="text/javascript">
<!--
var n=2;
var ix=new Array(n);
var iy=new Array(n);
for (i=0 ; i<=n ; i++){
ix[i]=-30;
iy[i]=-30;
}
var mx=0, my=0;
document.onmousemove = MouseMove;
function MouseMove() {
mx=event.clientX;
my=event.clientY;
}
function ImageMove() {
for (j=0 ; j<=n ; j++){
ix[j]=ix[j]+(mx-ix[j])/(j*10+10);
iy[j]=iy[j]+(my-iy[j])/(j*10+10);
}
for (k=0 ; k<=n ; k++){
document.images[k].style.left = ix[k] + "px";
document.images[k].style.top = iy[k] + "px";
}
setTimeout("ImageMove()",10);
}
// -->
</SCRIPT>

</BODY>		 サンプルページ


PC�p�����y�����l���g�����������}�W�������������z �����������O�~�y�������������z Yahoo �y�V NTT-X Store

�����z�[���y�[�W �������N���W�b�g�J�[�h �C�O�i���q���� ���������[�� �C�O���s�����������I �C�O�z�e��